<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <title>CKEditor 5 ClassicEditor build</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="./build/ckeditor.css">
</head>
<body>
<div class="layui-card-body">
    <div class="layui-card-table">
        <div class="editor">
            <h2>
                CKEditor 5 for ThinkAdmin.
            </h2>
            <p>
                这是一个基于 CKEditor 5 定制的 ThinkAdmin V6 后台富文本编辑器。
            </p>
            <p><strong>注意：</strong>编辑器集成到 ThinkAdmin 中，会自动调用后台 API 接口进行文件上传。否则图片上传会转为 base64 写到内容中。</p>
            <h2 style="margin-left:0px">
                <strong>大道至简・原生框架</strong>
            </h2>
            <p style="margin-left:0px;">
                非常感谢大家一直以来对 ThinkAdmin 的支持，ThinkAdmin 从 v1 到 v6 经历了几次大的调整，但总体都是基于 ThinkPHP 最新版本为核心在开发，以微信领域及最简后台为目标在设计。
            </p>
            <p style="margin-left:0px;">
                由于现有功能并不能满足所有项目的需求，ThinkAdmin 只做基础底层的开发，这里包括系统权限管理，系统存储配置，微信授权管理，以及常用功能集成等…… 因此 ThinkAdmin 也被定性为外包二开基线项目，目前已经有许多公司及个人在使用。
            </p>
            <p style="margin-left:0px;">
                ThinkAdmin v6 基于 v1-v5 版本的积累，结合 ThinkPHP 6.0 的思维重新构建，减少大量原非必需的组件，自建存储层、服务层及任务机制，增加了许多友好指令！ThinkAdmin v6 经历了数个项目实践与测试，不停调整，目前系统模块及微信模块已经趋于稳定，现将系统模块及微信定为 v6 内核两大模块发布，其他商城模块及相关辅助模块后续更进……
            </p>
            <p style="margin-left:0px;">
                我们致力于二次开发底层框架，提供完整的组件及 API，基于此框架可以快速开发应用。ThinkAdmin v6 依赖自制组件 ThinkLibrary v6，封装了大量常用操作，简化编码成本；默认集成 WechatDeveloper 组件，支持微信公众号、微信小程序、微信企业号、微信商户支付、支付宝支付接口等。支持本地服务文件存储、七牛云对象存储（支持 CDN 加速）、阿里云 OSS 存储（支持 CDN 加速）。
            </p>
            <p style="margin-left:0px;">
                另外项目安装及二次开发可以参考 ThinkPHP 官方文档，数据库文件摆放在项目根目录下。
            </p>
            <h4 style="margin-left:0px;">
                <strong>注意事项</strong>
            </h4>
            <ul style="list-style-type:disc;">
                <li>
                    项目测试需要自行搭建环境导入数据库 (admin_v6.sql) 并修改配置 ( config/database.php )；
                </li>
                <li>
                    若操作提示 “演示系统禁止操作” 等字样，需要删除演示路由配置 ( app/admin/route/demo.php ) 或清空路由文件；
                </li>
                <li>
                    当前版本使用 ThinkPHP 6.0.x，对 PHP 版本标注不低于 PHP 7.1，具体请阅读 ThinkPHP 官方文档；
                </li>
                <li>
                    环境需开启 PATHINFO，不再支持 ThinkPHP 的 URL 兼容模式运行（源于如何优雅的展示）；
                </li>
            </ul>
            <h2 style="margin-left:0px;">
                <strong>技术支持</strong>
            </h2>
            <p style="margin-left:0px;">
                开发前请认真阅读 ThinkPHP 官方文档会对您有帮助哦！
                <br>
                本地开发命令 php think run，使用 http://127.0.0.1:8000 访问项目。
                <br>
                官方地址及开发指南：<a href="https://thinkadmin.top/">https://thinkadmin.top</a>
            </p>
            <h2 style="margin-left:0px;">
                <strong>代码仓库</strong>
            </h2>
            <p style="margin-left:0px;">
                ThinkAdmin 为 MIT 协议开源项目，安装使用或二次开发不受约束，欢迎 fork 项目。
            </p>
            <p style="margin-left:0px;">
                部分代码来自互联网，若有异议可以联系作者进行删除。
            </p>
            <ul style="list-style-type:disc;">
                <li>
                    在线体验地址：<a href="https://v6.thinkadmin.top/">https://v6.thinkadmin.top</a>&nbsp;（账号和密码都是 admin ）
                </li>
                <li>
                    Gitee 仓库地址：<a href="https://gitee.com/zoujingli/ThinkAdmin/tree/v6">https://gitee.com/zoujingli/ThinkAdmin/tree/v6</a>
                </li>
                <li>
                    GitHub 仓库地址：<a href="https://github.com/zoujingli/ThinkAdmin/tree/v6">https://github.com/zoujingli/ThinkAdmin/tree/v6</a>
                </li>
            </ul>
            <h2 style="margin-left:0px;">
                <strong>注解权限</strong>
            </h2>
            <p style="margin-left:0px;">
                注解权限是指通过方法注释来实现后台 RBAC 授权管理，用注解来管理功能节点。
            </p>
            <p style="margin-left:0px;">
                开发人员只需要写好注释，RBAC 的节点会自动生成，只需要配置角色及用户就可以使用 RBAC 权限。
            </p>
            <ul style="list-style-type:disc;">
                <li>
                    此版本的权限使用注解实现
                </li>
                <li>
                    注释必需使用标准的块注释，如下案例
                </li>
                <li>
                    其中 @auth true 表示访问需要权限验证
                </li>
                <li>
                    其中 @menu true 显示在菜单编辑的节点可选项
                </li>
                <li>
                    其中 @login true 需要强制登录才可访问
                </li>
            </ul>
            <h2 style="margin-left:0px;">
                <strong><img src="https://oscimg.oschina.net/oscnet/up-008907f9115affc6c3b8289c0418799ed31.png"></strong>
            </h2>
            <h2 style="margin-left:0px;">
                <strong><img src="https://oscimg.oschina.net/oscnet/up-50c82f7f0292ddeab246ef8c2970a3d3b6d.png"></strong>
            </h2>
            <h2 style="margin-left:0px;">
                <strong><img src="https://oscimg.oschina.net/oscnet/up-a4b85e9c5f65db9b11cafea1caa03eae1c6.png"></strong>
            </h2>
            <h2 style="margin-left:0px;">
                <strong><img src="https://oscimg.oschina.net/oscnet/up-ec054c780918966739768e833fc623920ef.png"></strong>
                <br>
                <strong>框架指令</strong>
            </h2>
            <ul style="list-style-type:disc;">
                <li>
                    执行&nbsp;build.cmd&nbsp;可更新&nbsp;composer&nbsp;插件，会删除并替换&nbsp;vendor&nbsp;目录
                </li>
                <li>
                    执行&nbsp;php think run&nbsp;启用本地开发环境，访问&nbsp;http://127.0.0.1:8000
                </li>
                <li>
                    执行&nbsp;php think xadmin:fansall&nbsp;同步微信粉丝数据（依赖于&nbsp;wechat&nbsp;模块）
                </li>
                <li>
                    执行&nbsp;php think xadmin:version&nbsp;查看当前版本号，显示&nbsp;ThinkPHP&nbsp;版本及&nbsp;ThinkLibrary&nbsp;版本
                </li>
            </ul>
            <h4 style="margin-left:0px;">
                <strong>1. 线上代码更新</strong>
            </h4>
            <ul style="list-style-type:disc;">
                <li>
                    执行&nbsp;php think xadmin:install admin&nbsp;从线上服务更新&nbsp;admin&nbsp;模块的所有文件（注意文件安全）
                </li>
                <li>
                    执行&nbsp;php think xadmin:install wechat&nbsp;从线上服务更新&nbsp;wechat&nbsp;模块的所有文件（注意文件安全）
                </li>
                <li>
                    执行&nbsp;php think xadmin:install static&nbsp;从线上服务更新&nbsp;plugs&nbsp;静态资料文件（注意文件安全）
                </li>
                <li>
                    执行&nbsp;php think xadmin:install config&nbsp;从线上服务更新&nbsp;config&nbsp;常用配置文件（注意文件安全）
                </li>
            </ul>
            <h4 style="margin-left:0px;">
                <strong>2. 守护进程管理（可自建定时任务去守护监听主进程）</strong>
            </h4>
            <ul style="list-style-type:disc;">
                <li>
                    执行&nbsp;php think xadmin:queue listen&nbsp;[监听] 启动异步任务监听服务
                </li>
                <li>
                    执行&nbsp;php think xadmin:queue start&nbsp;[控制] 检查创建任务监听服务（建议定时任务执行）
                </li>
                <li>
                    执行&nbsp;php think xadmin:queue query&nbsp;[控制] 查询当前任务相关的进程
                </li>
                <li>
                    执行&nbsp;php think xadmin:queue status&nbsp;[控制] 查看异步任务监听状态
                </li>
                <li>
                    执行&nbsp;php think xadmin:queue stop&nbsp;[控制] 平滑停止所有任务进程
                </li>
            </ul>
            <h4 style="margin-left:0px;">
                <strong>3. 本地调试管理（可自建定时任务去守护监听主进程）</strong>
            </h4>
            <ul style="list-style-type:disc;">
                <li>
                    执行&nbsp;php think xadmin:queue webstop&nbsp;[调试] 停止本地调试服务
                </li>
                <li>
                    执行&nbsp;php think xadmin:queue webstart&nbsp;[调试] 开启本地调试服务（建议定时任务执行）
                </li>
                <li>
                    执行&nbsp;php think xadmin:queue webstatus&nbsp;[调试] 查看本地调试状态
                </li>
            </ul>
            <h2 style="margin-left:0px;">
                <br>
                <strong>项目历史版本</strong>
            </h2>
            <p style="margin-left:0px;">
                <span style="color:rgb(192,57,43);">体验账号及密码都是 admin</span>
            </p>
            <h3 style="margin-left:0px;">
                <strong>ThinkAdmin v6 基于 ThinkPHP 6.0 开发（后台权限基于注解实现）</strong>
            </h3>
            <ul style="list-style-type:disc;">
                <li>
                    在线体验地址：<a href="https://v6.thinkadmin.top/">https://v6.thinkadmin.top</a>
                </li>
                <li>
                    Gitee 代码地址：<a href="https://gitee.com/zoujingli/ThinkAdmin/tree/v6">https://gitee.com/zoujingli/ThinkAdmin/tree/v6</a>
                </li>
                <li>
                    Github 代码地址：<a href="https://github.com/zoujingli/ThinkAdmin/tree/v6">https://github.com/zoujingli/ThinkAdmin/tree/v6</a>
                </li>
            </ul>
            <h3 style="margin-left:0px;">
                <strong>ThinkAdmin v5 基于 ThinkPHP 5.1 开发（后台权限基于注解实现）</strong>
            </h3>
            <ul style="list-style-type:disc;">
                <li>
                    在线体验地址：<a href="https://v5.thinkadmin.top/">https://v5.thinkadmin.top</a>
                </li>
                <li>
                    Gitee 代码地址：<a href="https://gitee.com/zoujingli/ThinkAdmin/tree/v5">https://gitee.com/zoujingli/ThinkAdmin/tree/v5</a>
                </li>
                <li>
                    Github 代码地址：<a href="https://github.com/zoujingli/ThinkAdmin/tree/v5">https://github.com/zoujingli/ThinkAdmin/tree/v5</a>
                </li>
            </ul>
            <h3 style="margin-left:0px;">
                <strong>ThinkAdmin v4 基于 ThinkPHP 5.1 开发（不建议继续使用）</strong>
            </h3>
            <ul style="list-style-type:disc;">
                <li>
                    在线体验地址：<a href="https://v4.thinkadmin.top/">https://v4.thinkadmin.top</a>
                </li>
                <li>
                    Gitee 代码地址：<a href="https://gitee.com/zoujingli/ThinkAdmin/tree/v4">https://gitee.com/zoujingli/ThinkAdmin/tree/v4</a>
                </li>
                <li>
                    Github 代码地址：<a href="https://github.com/zoujingli/ThinkAdmin/tree/v4">https://github.com/zoujingli/ThinkAdmin/tree/v4</a>
                </li>
            </ul>
            <h3 style="margin-left:0px;">
                <strong>ThinkAdmin v3 基于 ThinkPHP 5.1 开发（不建议继续使用）</strong>
            </h3>
            <ul style="list-style-type:disc;">
                <li>
                    在线体验地址：<a href="https://v3.thinkadmin.top/">https://v3.thinkadmin.top</a>
                </li>
                <li>
                    Gitee 代码地址：<a href="https://gitee.com/zoujingli/ThinkAdmin/tree/v3">https://gitee.com/zoujingli/ThinkAdmin/tree/v3</a>
                </li>
                <li>
                    Github 代码地址：<a href="https://github.com/zoujingli/ThinkAdmin/tree/v3">https://github.com/zoujingli/ThinkAdmin/tree/v3</a>
                </li>
            </ul>
            <h3 style="margin-left:0px;">
                <strong>ThinkAdmin v2 基于 ThinkPHP 5.0 开发（不建议继续使用）</strong>
            </h3>
            <ul style="list-style-type:disc;">
                <li>
                    在线体验地址：<a href="https://v2.thinkadmin.top/">https://v2.thinkadmin.top</a>
                </li>
                <li>
                    Gitee 代码地址：<a href="https://gitee.com/zoujingli/ThinkAdmin/tree/v2">https://gitee.com/zoujingli/ThinkAdmin/tree/v2</a>
                </li>
                <li>
                    Github 代码地址：<a href="https://github.com/zoujingli/ThinkAdmin/tree/v2">https://github.com/zoujingli/ThinkAdmin/tree/v2</a>
                </li>
            </ul>
            <h3 style="margin-left:0px;">
                <strong>ThinkAdmin v1 基于 ThinkPHP 5.0 开发（不建议继续使用）</strong>
            </h3>
            <ul style="list-style-type:disc;">
                <li>
                    在线体验地址：<a href="https://v1.thinkadmin.top/">https://v1.thinkadmin.top</a>
                </li>
                <li>
                    Gitee 代码地址：<a href="https://gitee.com/zoujingli/ThinkAdmin/tree/v1">https://gitee.com/zoujingli/ThinkAdmin/tree/v1</a>
                </li>
                <li>
                    Github 代码地址：<a href="https://github.com/zoujingli/ThinkAdmin/tree/v1">https://github.com/zoujingli/ThinkAdmin/tree/v1</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./build/ckeditor.js"></script>
<script>

    // 注册创建函数
    window.createEditor = function (selector, option) {
        option = option || {};
        if (typeof option.height === 'number') option.height += 'px';
        let $element = $(selector);

        // 页面样式兼容处理，防止编辑器宽度溢出
        $element.parents('.layui-card-html').removeClass('layui-card-html').addClass('layui-card-table');
        // 编辑器工具栏定位处理
        let $pager = $element.parents('.layui-card-table').parent('.layui-card-body'), offset = $pager.offset();
        if (offset && offset.top > 0) {
            offset.right = offset.left + $pager.width();
            option.ui = Object.assign({}, option.ui || {}, {viewportOffset: offset});
        }
        if (!document.querySelector('.ck-body-wrapper')) {
            $element.after('<div class="ck-body-wrapper"></div>');
        }

        ClassicEditor.create(document.querySelector(selector), option).then(function (editor) {
            // 内部滚动条事件处理，刷新工具栏位置
            if (offset) $pager.on('scroll', function () {
                editor.ui.view.stickyPanel['_checkIfShouldBeSticky']();
            });
            // 将编辑器对象绑定到原标签上传，并触发初始化事件
            editor.$element = $(editor.sourceElement).data('editor', editor);
            editor.$element.triggerHandler('editor.init', editor);
            // 编辑器内容发现改变时，内容同步到表单元素
            editor.model.document.on("change:data", function () {
                editor.$element.val(editor.getData());
            });
            // 重置初始化编辑器最小高度，超出为自适应
            editor.editing.view.change(function (write) {
                write.setStyle('min-height', option.height || '400px', editor.editing.view.document.getRoot());
            });
        }).catch(function (error) {
            console.error('Oops, something went wrong!');
            console.warn('Build id: yw6zhbblcdbg-b5dhd7ee5sv3');
            console.error(error);
        });
    };

    // 第二个参数为配置
    window.createEditor('.editor', {height: 500});
</script>
</body>
</html>